import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/views/layout/Layout'

/* 路由模块(Modules) */
import nestedRouter from './modules/nested'

/** note: 子菜单只有在 children.length >=1 的时候才出现
 **/
/**
* hidden: true                   如果 `hidden:true` 不会显示在侧栏(default is false)
* alwaysShow: true               如果 alwaysShow 设置为 true, 不管子路径有多长总是显示根菜单
*                                if不设置 alwaysShow, 则根据是否有子路由来判断是否现在根菜单
* redirect: noredirect           if `redirect:noredirect` 面包屑中是否重定向
* name:'router-name'             name 是给<keep-alive>使用,所以每个路由必须设置!!!
* meta : {
    roles: ['admin','editor']    将控制页面权限(可以设置多个权限,数组的形式)
    title: 'title'               页面名称,用来显示在菜单栏和面包屑上
    icon: 'svg-name'             图标显示在菜单栏
    noCache: true                如果设置成 true, 该页面不会被缓存(default is false)
    breadcrumb: false            如果设置成 false, 该页面隐藏面包屑(default is true)
    affix: true                  如果设置成 true, 标签将附加在标签视图中
    notAuth: true                如果设置成 true, 则该页面在没有登录标识(token)时也可以访问, 默认可不设置
  }
**/

// constantRoutes 不需要管理端权限验证 和 登录验证的页面路由
export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path*',
        component: () => import('@/views/redirect/index'),
        meta: {
          admin: true
        }
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
    meta: {
      admin: true
    }
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/authredirect'),
    hidden: true,
    meta: {
      admin: true
    }
  },
  {
    path: '/404',
    component: () => import('@/views/errorPage/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/errorPage/401'),
    hidden: true
  },
  {
    path: '',
    component: Layout,
    redirect: 'dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: {
          title: 'dashboard',
          icon: 'dashboard',
          noCache: true,
          affix: true,
          admin: true
        }
      }
    ]
  }
]

export default new Router({
  // mode: 'history', // 服务端支持的情况下, 可以设置
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

// asyncRoutes 需要进行权限验证 和 路由验证
export const asyncRoutes = [

  /** 当路由表太长时，可以将其拆分为小模块**/

  // 多层级路由案例
  nestedRouter,

  // 权限案例
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/index',
    alwaysShow: true, // 总是显示根菜单吗
    meta: {
      title: 'permission',
      icon: 'lock',
      admin: true
    },
    children: [
      {
        path: 'page',
        component: () => import('@/views/permission/page'),
        name: 'PagePermission',
        meta: {
          title: 'pagePermission',
          admin: true
        }
      },
      {
        path: 'directive',
        component: () => import('@/views/permission/directive'),
        name: 'DirectivePermission',
        meta: {
        // 如果不设置角色，表示:此页面不需要权限
          title: 'directivePermission',
          admin: true
        }
      },
      {
        path: 'role',
        component: () => import('@/views/permission/role'),
        name: 'RolePermission',
        meta: {
          title: 'rolePermission',
          admin: true
        }
      }
    ]
  },

  // 外链案例
  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://zhuaiye.top',
        meta: {
          title: 'externalLink',
          icon: 'link',
          admin: true
        }
      }
    ]
  },

  { path: '*', redirect: '/404', hidden: true }
]
